<template>
  <div style="margin-bottom: 15px">
    <span>社群总数：{{ infoTabs.communityCount }}</span>
  </div>

  <el-table
    :data="tableData"
    border
    empty-text="暂无数据"
    stripe
    show-header
    :header-cell-style="{ background: '#e7e1fb' }"
    v-loading="loading"
    element-loading-text="Loading..."
    style="width: 100%"
    size="default"
    max-height="400px"
  >
    <el-table-column type="index" label="序号" width="80" />
    <el-table-column prop="communityName" label="社群名称" />
    <el-table-column prop="communityType" label="社群分类"></el-table-column>
    <el-table-column prop="communityRole" label="成员身份" />
    <el-table-column prop="joinTime" label="加入时间" />
    <el-table-column prop="status" label="状态">
      <template #default="scope">
        <span :style="{ color: getStatusColor(scope.row.status) }">
          {{ scope.row.status }}
        </span>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 -->
  <div class="pagination-block">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[20, 40, 80, 100]"
      background
      layout="total,sizes, prev, pager, next,jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup name="userCommunity">
import { getUserCommunityList } from '@/api/User/user';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
// 列表数据
const tableData = ref([]);
const loading = ref(true);

const infoTabs = ref({});
// 获取列表
const getUserDetails = async () => {
  loading.value = true;
  try {
    const res = await getUserCommunityList(route.params.uid);
    console.log(res);

    if (res.data.code === 200) {
      const userCommunity = res.data.data?.userCommunity || {};
      tableData.value = userCommunity.communityInfoList || [];
      total.value = userCommunity.communityInfoList?.length || 0;
      infoTabs.value = userCommunity;
    }
  } catch (error) {
    console.error('获取用户社群列表失败:', error);
    tableData.value = [];
    total.value = 0;
    infoTabs.value = {};
  } finally {
    loading.value = false;
  }
};
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  getUserDetails();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  getUserDetails();
};
// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case '已加入':
      return '#00B42A';
    case '审核中':
      return '#FFAE35 ';
    case '已退款':
      return '#FF4E4E';
    default:
      return '#303133';
  }
};
onMounted(() => {
  getUserDetails();
});
</script>
<style lang="scss" scoped>
.user-tabs {
  span {
    font-size: 14px;
    color: #9928af;
    margin-right: 150px;
  }
}
</style>
